<template>
  <div class="feature-list-container">
    <FeatureItemCard
      v-for="(featureItem, index) in featureList"
      :key="index"
      :iconText="featureItem.name"
      :size="100"
      @click="onCardClick(featureItem.routerPath)"
    >
      <template #default
        ><el-icon
          :style="{
            width: '70%',
          }"
          ><Plus /></el-icon
      ></template>
    </FeatureItemCard>
  </div>
</template>

<script setup lang="ts">
import router from '../router';
import FeatureItemCard from './FeatureItemCard.vue';
// TODO: 支持配置对象到插槽内容的映射
const featureList = [
  {
    name: '一对一视频',
    routerPath: '/one2one',
  },
  {
    name: '一对一视频',
    routerPath: '/one2one',
  },
  {
    name: '一对一视频',
    routerPath: '/one2one',
  },
  {
    name: '一对一视频',
    routerPath: '/one2one',
  },
  {
    name: '一对一视频',
    routerPath: '/one2one',
  },
  {
    name: '一对一视频',
    routerPath: '/one2one',
  },
  {
    name: '一对一视频',
    routerPath: '/one2one',
  },
  {
    name: '一对一视频',
    routerPath: '/one2one',
  },
  {
    name: '一对一视频',
    routerPath: '/one2one',
  },
];

const onCardClick = (routerPath: string) => {
  const { userId, roomId } = router.currentRoute.value.query;
  router.push({ path: routerPath, query: { userId, roomId } });
};
</script>

<style scoped>
.feature-list-container {
  width: 350px;
  height: 350px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: space-around;
}
</style>
